<!DOCTYPE html>
<html>
<head>
    <title>Ceadeal 后台管理系统</title>
    <#include "../common/head.ftl"/>
    <link rel="stylesheet" type="text/css" href="/plugin/fancybox3/dist/jquery.fancybox.css">
</head>
<body class="cw-body">
<div id="page-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            测试
            <small>fancybox3</small>
        </h1>
        <ol class="breadcrumb">
            <li class="active"><a href="/main"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">测试</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Your Page Content Here -->
        <h4>基本使用</h4>
        <p>
            <a href="/plugin/fancybox2/demo/1_b.jpg" data-fancybox data-caption="测试图片">
                <img src="/plugin/fancybox2/demo/1_s.jpg" alt=""/>
            </a>
        </p>

        <h4>简单的图像画廊</h4>
        <p>
            <a href="/plugin/fancybox2/demo/1_b.jpg" data-fancybox="group" data-caption="图片1">
                <img src="/plugin/fancybox2/demo/1_s.jpg" alt=""/>
            </a>
            <a href="/plugin/fancybox2/demo/2_b.jpg" data-fancybox="group" data-caption="图片2">
                <img src="/plugin/fancybox2/demo/2_s.jpg" alt=""/>
            </a>
            <a href="/plugin/fancybox2/demo/3_b.jpg" data-fancybox="group" data-caption="图片3">
                <img src="/plugin/fancybox2/demo/3_s.jpg" alt=""/>
            </a>
            <a href="/plugin/fancybox2/demo/4_b.jpg" data-fancybox="group" data-caption="图片4">
                <img src="/plugin/fancybox2/demo/4_s.jpg" alt=""/>
            </a>
        </p>

        <h4>手动调用fancyBox</h4>
        <p><a id="open01" href="javascript:;">打开</a></p>

        <h4>更多</h4>
        <p><a id="open02" href="javascript:;">官方文档</a></p>
    </section>
    <!-- /.content -->
</div>

<!-- REQUIRED JS SCRIPTS -->
<#include "../common/script-common.ftl"/>
<script src="/plugin/fancybox3/dist/jquery.fancybox.min.js"></script>
<script>
    $(function(){
        $("#open01").click(function() {
            $.fancybox.open('<div class="message"><h2>望庐山瀑布</h2><p>日照香炉生紫烟，遥看瀑布挂前川。<br />飞流直下三千尺，疑是银河落九天。</p></div>');
        });
        $("#open02").click(function() {
            location.href = "http://fancyapps.com/fancybox/3/docs";
        });
    })
</script>
</body>
</html>